<template>
    <view class="vip-card-detail">
        <view class="header common-interval">
            <view class="common-flex-between" style="align-items: center;">
                <view>
                    <text class="icon-vip icon-btn"></text>
                    <text>{{vipCardDetail.vipCardMemberLogName}} </text>
                </view>
                <text style="font-size: 24rpx;" v-if="!!vipCardDetail.vipCardMemberLogActivationTime">有效期：{{ vipCardDetail.vipCardMemberLogActivationTime | formatTime }}至{{ vipCardDetail.vipCardMemberLogEndTime | formatTime }}</text>
                <text style="font-size: 24rpx;" v-else>最晚激活日期：{{ vipCardDetail.vipCardMemberLogLatestActivationTime | formatTime }}</text>
            </view>
            <view class="content">
                <view class="common-title">
                    <text class="common-title-line"/>
                    会员权益
                </view>
                <view class="common-flex-between vip-wrapper">
                    <view class="vip-item">
                        <image :src="http+'vip-detail-one.png'"/>
                        <view>
                            <text class="num">{{vipCardDetail.booksNum}}</text><text>本</text>
                        </view>
                        <view class="little-txt">剩余可借数量</view>
                    </view>
                    <view class="vip-item">
                        <image :src="http+'vip-detail-two.png'"/>
                        <view>
                            <text class="num">{{vipCardDetail.vipCardMemberLogType === '1' ? vipCardDetail.remainderTimes: vipCardDetail.remainderDay }}</text><text>{{vipCardDetail.vipCardMemberLogType === '1' ? '次' : '天'}}</text>
                        </view>
                        <view class="little-txt">剩余{{vipCardDetail.vipCardMemberLogType === '1' ? '次' : '天'}}数</view>
                    </view>
                    <view class="vip-item">
                        <image :src="http+'vip-detail-three.png'"/>
                        <view>
                            <text class="num">{{vipCardDetail.vipCardMemberLogTimes}}</text><text>天</text>
                        </view>
                        <view class="little-txt">单次借阅周期</view>
                    </view>
                    <view class="vip-item">
                        <image :src="http+'vip-detail-four.png'"/>
                        <view>
                            <text class="num">{{vipCardDetail.vipCardMemberLogType === '1' ? vipCardDetail.vipCardMemberLogBorrowFrequencyTrue : vipCardDetail.useDay}}</text><text>{{vipCardDetail.vipCardMemberLogType === '1' ? '次' : '天'}}</text>
                        </view>
                        <view class="little-txt">已使用{{vipCardDetail.vipCardMemberLogType === '1' ? '次' : '天'}}数</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="common-white-btn" @tap="watchLinkOrder">
            查看关联订单
        </view>
    </view>
</template>

<script>
    import { dateFmt } from '@/util/utils';
    import service from '@/service';
    export default {
        name: "vipCardDetail",
        data(){
            return{
                http: this.$https,
                vipCardMemberLogId: '',
                vipCardDetail: {}
            }
        },
        onLoad(params){
            let { vipCardMemberLogId } = params;
            this.vipCardMemberLogId = vipCardMemberLogId;
            this.vipCardDetails();
        },
        methods: {
            vipCardDetails(){
                uni.showLoading({
                    title: ''
                })
                service.mineService.vipCardDetails({
                    data: {
                        vipCardMemberLogId: this.vipCardMemberLogId
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            this.vipCardDetail = res.result || {}
                        } else {
                            uni.showToast({
                                title: `${res.resultMsg}`,
                                duration: 2500,
                                icon: 'none'
                            })
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    method: 'GET'
                })
            },
            watchLinkOrder(){
                uni.navigateTo({
                    url: `../orderManagement/link-order?vipCardMemberLogId=${this.vipCardMemberLogId}`
                })
            }
        },
        filters: {
            formatTime(value){
                return dateFmt( Number(value+'000'), 'yyyy-MM-dd')
            },
        }
    }
</script>

<style scoped lang="scss">
    .vip-card-detail{
        .header{
            height:240rpx;
            position: relative;
            background:rgba(43,168,252,1);
            color: #fff;
            padding-top: 32rpx;
            box-sizing: border-box;
            .icon-btn{
                margin-right: 10rpx;
                color: #ffffff;
                font-size: 40rpx;
            }
            .content{
                position: absolute;
                top: 100rpx;
                left: 30rpx;
                width: 690rpx;
                height:475rpx;
                background:rgba(255,255,255,1);
                box-shadow:0rpx 3rpx 16rpx rgba(0,0,0,0.08);
                border-radius:10rpx;
                padding: 0 20rpx;
                box-sizing: border-box;
                .vip-item{
                    height:160rpx;
                    width: 315rpx;
                    padding: 20rpx;
                    box-sizing: border-box;
                    position: relative;
                    margin-bottom: 20rpx;
                    color: #2BA8FC;
                    image{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                    .num{
                        font-size:48rpx;
                        font-weight:bold;
                        color: #2BA8FC;
                    }
                    .little-txt{
                        color: #70C6FF;
                    }
                }
            }
            .vip-btn{
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        .common-white-btn{
            margin-top: 464rpx;
            margin-left: 98rpx;
            width: 555rpx;
            text-align: center;
            box-sizing: border-box;
        }
    }
</style>